<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">查询搜索</el-button>
        <el-button
                style="float:right;margin-right: 15px"
                @click="handleResetSearch()"
                size="small"
        >重置</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="用户手机:">
            <el-input v-model="listQuery.phone" class="input-width" placeholder="用户手机"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button type="success" icon="el-icon-download" @click="exportToExcel">导出</el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="brandTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column label="编号" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="用户昵称" width="250" align="center">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>
        <el-table-column label="电话号码" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.phone }}</template>
        </el-table-column>
        <el-table-column label="积分余额" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.integral/100 }}</template>
        </el-table-column>
        <el-table-column label="注册时间" width="200" align="center">
          <template slot-scope="scope">{{
            scope.row.createTime | formatTime
            }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { formatDate } from "@/utils/date";
import {
  fetchList,
  updateShowStatus,
  updateFactoryStatus,
  deleteMember,
  fetchBlanceList,
  updateMemberOrderInfo,
  getParentUserByCurrentId,
} from "@/api/ums/member";

export default {
  name: "memberList",
  data() {
    return {
      visible: false,
      currentSecondReferee: '',
      dialogVisible: false,
      blanceList: null,
      operateType: null,
      listQuery: {
        nickname: null,
        phone: null,
        pageNum: 1,
        pageSize: 50,
        storeId: null,
        isVip: null,
        isDelivery: null,
      },
      list: null,
      total: null,
      listLoading: true,
      multipleSelection: [],
      currentMemberIds: [],
      centerDialogVisible: false,
      tHeader:['Id', '注册时间', '用户昵称', '电话号码','积分'],
      tValue:['id', 'createTime', 'nickname','phone','integral'],
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    verifyStatusFilter(value) {
      if (value === 1) {
        return "消费";
      } else {
        return "收入";
      }
    },
    formatStatus(status) {
      for (let i = 0; i < defaultStatusOptions.length; i++) {
        if (status === defaultStatusOptions[i].value) {
          return defaultStatusOptions[i].label;
        }
      }
    },
    formatReturnAmount(row) {
      return row.productRealPrice * row.productCount;
    },
    formatVip(val){
      if(val == 0){
        return "否"
      }else{
        return "是"
      }
    }
  },
  methods: {
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    getParentUser(currentUserId){
      console.log("this userId..." + currentUserId);
      getParentUserByCurrentId(currentUserId).then((response) => {
        this.currentSecondReferee = response.data.nickname;
      });
    },
    handleBatchOperate() {
      console.log(this.operateType);
      if (this.operateType == null) {
        this.$message({
          message: "请选择操作类型",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: "请选择要操作的会员",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      this.$confirm("是否要进行该批量操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = [];
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id);
        }
        switch (this.operateType) {
          case this.operates[0].value:
            this.assignStore(ids);
            break;
          default:
            break;
        }
        this.getList();
      });
    },
    assignStore(ids) {
      this.currentMemberIds = ids;
      console.log("当前会员ids" + this.currentMemberIds);
      let params = new URLSearchParams();
      params.append("ids", ids);
      this.centerDialogVisible = true;
    },
    handleShowVeriyEditDialog(index, row) {
      this.dialogVisible = true;
      fetchBlanceList(row.id).then((response) => {
        this.blanceList = response.data;
      });
    },
    handleShowChange(index, row) {
      let params = new URLSearchParams();
      params.append("ids", row.id);
      params.append("showStatus", row.showStatus);
      updateShowStatus(params).then((response) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.records;
        this.total = response.data.total;
        this.totalPage = response.data.pages;
        this.pageSize = response.data.size;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleUpdate(index, row) {
      this.$router.push({ path: "/ums/updateMember", query: { id: row.id } });
    },
    handleDelete(index, row) {
      this.$confirm("是否要删除该会员", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteMember(row.id).then((response) => {
          this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
          this.getList();
        });
      });
    },
    getProductList(index, row) {
      console.log(index, row);
    },
    getProductCommentList(index, row) {
      console.log(index, row);
    },
    handleFactoryStatusChange(index, row) {
      var data = new URLSearchParams();
      data.append("ids", row.id);
      data.append("factoryStatus", row.factoryStatus);
      updateFactoryStatus(data)
        .then((response) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1000,
          });
        })
        .catch((error) => {
          if (row.factoryStatus === 0) {
            row.factoryStatus = 1;
          } else {
            row.factoryStatus = 0;
          }
        });
    },
    handleShowStatusChange(index, row) {
      let data = new URLSearchParams();
      data.append("ids", row.id);
      data.append("showStatus", row.showStatus);
      updateShowStatus(data)
        .then((response) => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1000,
          });
        })
        .catch((error) => {
          if (row.showStatus === 0) {
            row.showStatus = 1;
          } else {
            row.showStatus = 0;
          }
        });
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    searchMemberList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    updateOrderInfo() {
      updateMemberOrderInfo().then((response) => {
        this.getList();
        this.$message({
          message: "同步成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    addMember() {
      this.$router.push({ path: "/pms/addMember" });
    },
    fetchStoreList() {
      fetchStoreList(this.storeListQuery).then((response) => {
        this.stores = response.data.records;
      });
    },
    exportToExcel () {
            this.$confirm('确定下载列表文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.export2Excel()
            }).catch(() => {})
    },
    export2Excel () {
        var that = this
        require.ensure([], () => {
            const { export_json_to_excel } = require('@/assets/js/Export2Excel.js')// js文件的位置
            const tHeader = that.tHeader;
            const filterVal = that.tValue;// 导出的表头字段名，需要导出表格字段名
            const data = that.formatJson(filterVal, that.list);
            export_json_to_excel(tHeader, data, '会员表')// 导出的表格名称，根据需要自己命名
        })
    },
    formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>


